<template>
  <div>
    <el-form
      ref="elForm"
      :model="PopUpformData"
      size="medium"
      label-width="1.2rem"
      :rules="rules"
      class="popUp-from"
    >
      <el-row>
        <el-col :offset="1" :span="10">
          <el-form-item label="变电站名称" prop="stationName">
            <el-select
              v-model="PopUpformData.stationId"
              placeholder="请选择"
              clearable
              :disabled="isShow"
              @change="bdzmcs"
              :style="{ width: '100%' }"
              filterable
            >
              <el-option
                v-for="(item) in stationList "
                :key="item.stationId"
                :label="item.stationName"
                :value="item.stationId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :offset="1" :span="10">
          <el-form-item label="区域名称" prop="area">
            <el-select
              v-model="PopUpformData.area"
              placeholder="请选择"
              clearable
              :disabled="isShow"
              @change="bdzmcss"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item,index) in getAreaList"
                :key="index"
                :label="item.areaName"
                :value="item.areaId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :offset="1" :span="10">
          <el-form-item label="测点类型" prop="pointType">
            <el-select
              v-model="PopUpformData.pointType"
              placeholder="请选择"
              clearable
              filterable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item,index) in getPointTypeList"
                :key="index"
                :label="item.pointTypeName"
                :value="item.pointId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :offset="1" :span="10">
          <el-form-item label="所属设备" prop="deviceId">
            <el-select
              v-model="PopUpformData.deviceId"
              placeholder="请选择"
              clearable
              filterable
              @change="deviceName"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item,index) in getDeviceMenu"
                :key="index"
                :label="item.deviceName"
                :value="item.deviceId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :offset="1" :span="10">
          <el-form-item label="测点名称">
            <el-input v-model="PopUpformData.pointName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :offset="1" :span="10">
          <el-form-item label="测点编码">
            <el-input v-model="PopUpformData.pointId"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :offset="1" :span="10">
          <el-form-item label="智能网关标识">
            <el-input v-model="PopUpformData.getway_point_id"></el-input>
          </el-form-item>
        </el-col>
        <el-col :offset="1" :span="10">
          <el-form-item label="备注">
            <el-input v-model="PopUpformData.remark"></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :offset="1" :span="10"> -->
          <!-- 同 设备类型 -->
          <!-- <el-form-item label="被测设备类型:" prop="time">
            <el-select
              v-model="PopUpformData.equip_type"
              placeholder="请选择设备类型"
              clearable
              filterable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in getDeviceTypeList"
                :key="index"
                :label="item.deviceTypeName"
                :value="item.deviceTypeId"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item> -->
        <!-- </el-col> -->
      </el-row>
      <el-row>
        <!-- <el-col :offset="1" :span="10"> -->
          <!-- <el-form-item label="被测设备名称">
            <el-input v-model="PopUpformData.equip_name"></el-input>
          </el-form-item>-->
          <!-- 同 关联一次/二次设备名称 -->
          <!-- <el-form-item label="被测设备名称" prop="equip_name">
            <el-select
              v-model="PopUpformData.equip_name"
              placeholder="请选择"
              clearable
              filterable
              @change="deviceName"
            >
              <el-option
                v-for="(item, index) in sftsOptions"
                :key="index"
                :label="item.interval"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item> -->
        <!-- </el-col> -->
        <!-- <el-col :offset="1" :span="10">
          <el-form-item label="关联一次/二次设备名称:" prop>
            <el-select
              v-model="PopUpformData.equip_name"
              placeholder
              clearable
              filterable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in sftsOptions"
                :key="index"
                :label="item.interval"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
      </el-row>
      <el-row>
      </el-row>
      <el-row class="buttom-box">
        <el-button @click="determine" type="primary">确定</el-button>
        <el-button type="primary" @click="dialog">取消</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { ParameterManagementModule } from "@/store/modules/ParameterManagement";
@Component({})
export default class extends Vue {
  @Prop() multipleSelection!: any;
  @Prop() PopUptitle!: any;
  @Prop() isShow!: any;
  //弹框状态
  public dialogVisible: boolean = false;
  //弹框表单
  public PopUpformData: object = {
    stationId: "",
    area: "",
    pointType: "",
    deviceId: "",
    pointId: "",
    // cdbm: "",
    getway_point_id: "",
    equip_type: "",
    equip_name: "",
    remark: "",
    pointName: "",
  };

  getDeviceMenu = [];
  sftsOptions = [];
  rules = {
    // stationName: [{ required: true, message: "请输入内容", trigger: "blur" }],
    // area: [{ required: true, message: "请输入内容", trigger: "blur" }],
    pointType: [{ required: true, message: "请输入内容", trigger: "blur" }],
    deviceId: [{ required: true, message: "请输入内容", trigger: "blur" }],
  };
  $refs!: {
    elForm: any;
  };
  getAreaLists = [];
  stationList = [];
  get treeSbSsdsId() {
    return ParameterManagementModule.treeSbIdName.ssdsId;
  }
  get getAreaList() {
    return ParameterManagementModule.getAreaList;
  }
  get getPointTypeList() {
    return ParameterManagementModule.getPointTypeList;
  }
  get parentId() {
    return ParameterManagementModule.treeSbIdName.parentId;
  }
  get bdzId() {
    return ParameterManagementModule.treeSbIdName.bdzId;
  }
  // 被测设备类型
  get getDeviceTypeList() {
    return ParameterManagementModule.getDeviceTypeList;
  }
  bdzmcs(val) {
    // console.log(val);
    let resultArr = this.stationList.filter((item) => {
      return item.stationId === val;
    });
    (this as any).PopUpformData.stationName = resultArr[0].stationName;
    (this as any).PopUpformData.stationId = resultArr[0].stationId;
    // console.log((this as any).PopUpformData);
  }
  deviceName(val) {
    // console.log(val);
    let resultArr = this.getDeviceMenu.filter((item) => {
      return item.deviceId === val;
    });
    (this as any).PopUpformData.deviceName = resultArr[0].deviceName;
    // console.log((this as any).PopUpformData);
  }
  //弹框确定按钮
  determine() {
    this.$refs.elForm.validate((valid: any) => {
      if (!valid) {
        this.$message({
          type: "warning",
          message: "表单校验不通过",
        });
        return;
      }
      if (this.PopUptitle == "新建") {
        // (this as any).PopUpformData.pointId = "";
        // this.$delete(this.PopUpformData, "area");
        // this.$delete(this.PopUpformData, "cdbm");
        let resultArr = this.stationList.filter((item) => {
          return item.stationId === (this as any).PopUpformData.stationId;
        });
        (this as any).PopUpformData.stationName = resultArr[0].stationName;
        if (!(this as any).PopUpformData.deviceId) {
          (this as any).PopUpformData.deviceId = "";
          (this as any).PopUpformData.deviceName = "";
        }
        console.log(22222, this.PopUpformData);
        (this as any).$services
          .insertFkPoint({ data: this.PopUpformData, method: "post" })
          .then((result: any) => {
            // console.log(result);
            if (result.code === 200) {
              this.$message({
                showClose: true,
                message: result.message,
                type: "success",
              });
            } else {
              this.$message({
                showClose: true,
                message: result.message,
                type: "warning",
              });
            }
          })
          .catch((err: object) => {
            console.log(err);
          });
        this.$emit("determine", false);
        this.$emit("initList");
      }
      if (this.PopUptitle == "修改") {
        this.$delete(this.PopUpformData, "area");
        this.$delete(this.PopUpformData, "pointId");
        let resultArr = this.stationList.filter((item) => {
          return item.stationId === (this as any).PopUpformData.stationId;
        });
        (this as any).PopUpformData.stationName = resultArr[0].stationName;
        if (!(this as any).PopUpformData.deviceId) {
          (this as any).PopUpformData.deviceId = "";
          (this as any).PopUpformData.deviceName = "";
        } else {
          let resultArr = this.getDeviceMenu.filter((item) => {
            return item.deviceId === (this as any).PopUpformData.deviceId;
          });
          (this as any).PopUpformData.deviceName = resultArr[0].deviceName;
        }
        // console.log(1);
        (this as any).$services
          .updateFkPoint({ data: this.PopUpformData, method: "post" })
          .then((result: any) => {
            // console.log(result);
            if (result.code === 200) {
              this.$message({
                showClose: true,
                message: result.message,
                type: "success",
              });
            } else {
              this.$message({
                showClose: true,
                message: result.message,
                type: "warning",
              });
            }
          })
          .catch((err: object) => {
            console.log(err);
          });
        this.$emit("determine", false);
        this.$emit("initList");
      }
    });
  }
  bdzmcss() {}
  dialog() {
    this.$emit("determine", false);
  }

  mounted() {
    if (this.PopUptitle == "修改") {
      // console.log(222222,this.multipleSelection);
      (this as any).PopUpformData.pointType =
        (this as any).multipleSelection[0].proType || "";
      (this as any).PopUpformData.pointName =
        (this as any).multipleSelection[0].pointName || "";
      (this as any).PopUpformData.equip_type =
        (this as any).multipleSelection[0].equipType || "";
      (this as any).PopUpformData.equip_name =
        (this as any).multipleSelection[0].equipName || "";
      (this as any).PopUpformData.getway_point_id =
        (this as any).multipleSelection[0].getwayPointId || "";
      (this as any).PopUpformData.remark =
        (this as any).multipleSelection[0].remark || "";
      (this as any).PopUpformData.pointId =
        (this as any).multipleSelection[0].pointId || "";
      (this as any).PopUpformData.deviceId =
        (this as any).multipleSelection[0].deviceId || "";
    }

    (this as any).PopUpformData.stationId = this.bdzId;
    (this as any).PopUpformData.area = this.parentId;
    (this as any).$services
      .getDeviceMenuList({ data: { area: (this as any).PopUpformData.area } })
      .then((result: any) => {
        // console.log(result);
        this.getDeviceMenu = result.data;
      })
      .catch((err: object) => {
        console.log(err);
      });

    (this as any).$services
      .getStationList({ data: { ssds: this.treeSbSsdsId } })
      .then((result: any) => {
        this.stationList = result.data;
        // console.log(result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
}
</script>

<style lang="scss" scoped>
</style>

<style lang="scss" >
.popUp-from {
  .el-form-item {
    margin-bottom: 0.35rem;
  }
}
.buttom-box {
  display: flex;
  justify-content: center;
  align-items: center;
  > .el-button {
    margin: 0 0.6rem;
  }
}
</style>
